<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        caption {
            font-size: 30px;
        }

        table {
            margin: auto;
            width: 800px;
            border-spacing: 0px;
            border: 1px gray solid;
            text-align: center;
        }

        thead {
            background-color: rgb(228, 228, 228);
        }

        tr {
            height: 50px;
        }

        .sto {
            font-weight: 600;
        }

        .car {
            font-weight: 600;
        }

        /* 搜索 */
        #searchInput {
            padding: 8px 12px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }

        #searchBtn,
        #resetBtn {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .clerbtn {
            float: right;
            margin-right: 480px;
            margin-top: 20px;
        }
        table img {
            max-width: 80px;
            max-height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        th:nth-child(1) {
            width: 100px;
        }
        table {
            width: 900px;
        }
    </style>
</head>

<body>
    <div style="text-align: center; margin: 20px;">
        <input type="text" id="searchInput" placeholder="商品名称搜索...">
        <button id="searchBtn">搜索</button>
    </div>
    <table border="1px">
        <caption class="sto">商品列表</caption>
        <thead>
            <tr>
                <th>商品图片</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table border="1px" class="shopCar">
        <caption class="car">购物车</caption>
        <thead>
            <tr>
                <th>商品图片</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <button onclick="" class="clerbtn">清空购物车</button>
    <script>
        let goodsList = [{
            goodsname: "苹果",
            price: 10,
            stock: 100,
            image: 'https://pic.616pic.com/photoone/00/07/60/6197663c633195005.jpg!/fw/1120',
        }, {
            goodsname: "香蕉",
            price: 15,
            stock: 99,
            image:'https://www.2008php.com/2020_Website_appreciate/2020-11-18/20201118123305.jpg',
        }, {
            goodsname: "哈密瓜",
            price: 20,
            stock: 99,
            image:'https://pic.nximg.cn/file/20220929/31527039_090715490128_2.jpg',
        },
        {
            goodsname: "榴莲",
            price: 200,
            stock: 99,
            image:'https://pic.nximg.cn/file/20230721/34599220_224959168102_2.jpg',
        },]
        // 购物车列表
        let shopCarList = [
            {
                image:'https://www.2008php.com/2020_Website_appreciate/2020-11-18/20201118123305.jpg',
                goodsname: '香蕉',
                price: 15,
                num: 1,
               
            }, {
                goodsname: '哈密瓜',
                price: 20,
                num: 1,
                image:'https://pic.nximg.cn/file/20220929/31527039_090715490128_2.jpg',
            },
            {
                goodsname: '榴莲',
                price: 200,
                num: 1,
                image:'https://pic.nximg.cn/file/20230721/34599220_224959168102_2.jpg',
            }
        ]
        //获取元素
        let tbody = document.querySelector("tbody");
        let shopTbody = document.querySelector(".shopCar tbody")
        window.onload = function () {
            random();
            shop();
        }
        //商品数据渲染
        function random() {
            let text = ""
            goodsList.forEach((item, index) => {
                text += `
             <tr>
                 <td><img src="${item.image}" width="80" height="80"></td>
                <td>${item.goodsname}</td>
                <td>${item.price}</td>
                <td>${item.stock}</td>
                <td><button data-index =${index}>加入购物车</button></td>
            </tr>
          `  })
            tbody.innerHTML = text;
        }
        // 购物车
        function shop() {
            let html = "";
            shopCarList.forEach((item, index) => html += `
            <tr>
                 <td><img src="${item.image}" width="80" height="80"></td>
                <td>${item.goodsname}</td>
                <td>${item.price}</td>
                <td><button class="addBtn"data-index = "${index}" >+</button>${item.num}<button class="downBtn"data-index = "${index}" >-</button></td>
                <td>${item.price * item.num}</td>
                <td><button class="delBtn" data-index = "${index}">删除</button></td>
            </tr>
            `)
            shopTbody.innerHTML = html;
        }
        // 商品tbody
        tbody.addEventListener('click', function () {
            // 加入购物车
            if (event.target.tagName === "BUTTON") {
                // console.log(event.target.dataset.index);
                // 当前点击对象在商品列表里面的下标
                let i = event.target.dataset.index;
                let ind = shopCarList.findIndex(item => item.goodsname === goodsList[i].goodsname)
                if (ind > -1) {
                    if (goodsList[i].stock != 0)
                        goodsList[i].stock--;
                    random();
                    // 购物车对应商品下标
                    shopCarList[ind].num++;
                    shop();
                } else {
                    let obj = {
                        goodsname: goodsList[i].goodsname,
                        price: goodsList[i].price,
                        num: 1,
                    }
                    shopCarList.push(obj);
                    shop();
                }
            }
        })
        // shopbody事件
        shopTbody.addEventListener('click', function () {
            //加号
            if (event.target.className == "addBtn") {
                let i = event.target.dataset.index;
                let g_index = goodsList.findIndex(item => item.goodsname === shopCarList[i].goodsname);
                if (goodsList[g_index].stock > 0) {
                    6
                    goodsList[g_index].stock--;
                    shopCarList[i].num++;
                    shop();
                    random();
                }
            }
            // 减号
            if (event.target.className == "downBtn") {
                let i = event.target.dataset.index;
                let g_index = goodsList.findIndex(item => item.goodsname === shopCarList[i].goodsname);
                if (shopCarList[i].num > 1) {
                    goodsList[g_index].stock++;
                    shopCarList[i].num--;
                    shop();
                    random();
                } else {
                    goodsList[g_index].stock++;
                    random();
                    shopCarList.splice(i, 1);
                    shop();
                }
            }
            // 删除
            if (event.target.className == "delBtn") {
                let i = event.target.dataset.index;
                let g_index = goodsList.findIndex(item => item.goodsname === shopCarList[i].goodsname);
                goodsList[g_index].stock += shopCarList[i].num;
                random();
                shopCarList.splice(i, 1);
                shop();
            }
        })
        tbody.addEventListener('click', function () {
    // 加入购物车
    if (event.target.tagName === "BUTTON") {
        let i = event.target.dataset.index;
        let ind = shopCarList.findIndex(item => item.goodsname === goodsList[i].goodsname)
        if (ind > -1) {
            if (goodsList[i].stock != 0)
                goodsList[i].stock--;
            random();
            // 购物车对应商品下标
            shopCarList[ind].num++;
            shop();
        } else {
            let obj = {
                goodsname: goodsList[i].goodsname,
                price: goodsList[i].price,
                num: 1,
                image: goodsList[i].image // 添加图片信息
            }
            shopCarList.push(obj);
            shop();
        }
    }
})
    </script>
</body>

</html>